<template>
  <el-dialog title="班级信息" :model-value="show" @update:model-value="close">
    <pf-table
      class="pf-mt-20"
      :config="tableConfig"
      :data="tableDatas"
      @selection-change="selectionChange"
    >
    </pf-table>
    <template #footer>
      <div class="pf-text-right">
        <el-button type="primary" @click="confirmSelUser">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, Ref, toRefs, watch } from 'vue';
import { emptyTable, TableModel, useData } from 'pf-component';
import { TableNameEnum } from '@/constants/enum/table-name.enum';
import { useClass } from '@/views/org/class/useClass';
import { useNotice } from '@/components/element-plus/notice';

export default defineComponent({
  name: 'ClassListDialog',
  props: {
    show: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const { message } = useNotice();

    const tableDatas: Ref<any[]> = ref([]);
    const tableConfig: Ref<TableModel> = ref(emptyTable);
    onMounted(() => {
      Promise.all([
        useData().loadTable([{ name: TableNameEnum.dcClass, config: tableConfig }])
      ]).then(ress => {
        if (ress.findIndex(res => !res) === -1) {
          tableConfig.value.checkbox();
        }
      });
    });
    const selectedFieldList: Ref<any[]> = ref([]);
    const selectionChange = (selection: any[]) => {
      selectedFieldList.value = selection;
    };
    const confirmSelUser = () => {
      if (selectedFieldList.value && selectedFieldList.value.length !== 1) {
        message.error('please select one record!');
        return;
      }
      emit('close', selectedFieldList.value);
    };
    const cancel = () => {
      emit('close');
    };
    const close = () => {
      emit('close');
    };
    watch(
      () => props.show,
      show => {
        if (show) {
          useClass()
            .list()
            .then(res => {
              tableDatas.value = res;
            });
        }
      }
    );
    return {
      tableDatas,
      tableConfig,
      selectionChange,
      confirmSelUser,
      cancel,
      close
    };
  }
});
</script>

<style scoped></style>
